<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./style/index.css" />
  <title>HTML常用效果</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="color-bars">
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
      <div class="color-bar"></div>
    </div>
    <div class="inner">
      <h1>HTML常用效果</h1>
    </div>
  </div>
  <div class="full-wrapper demos">
    <div class="smart-grid">
      <div class="web-box">
        <div class="web-box-inner">
          <div class="subz">
            <h6 class="sub-heading">演示例子</h6>
          </div>
          <div class="row" id="container"></div>
        </div>
      </div>
      <div class="copyright">
        <a href="//beian.miit.gov.cn/">京ICP备20018979号-1</a>
      </div>
    </div>
  </div>
</body>
<script src="./index.js"></script>
<script>
  var domContainer = document.querySelector("#container");
  var htmlText = "";
  for (var i = 0, length = array.length; i < array.length; i++) {
    var node =
      '<div class="block">\
          <a href=' +
      array[i].url +
      " target='_blank'>" +
      array[i].name +
      "</a></div>";
    htmlText += node;
  }
  domContainer.innerHTML = htmlText;
</script>

</html>